<template>
  <el-card class="search-keyword">
    <p>搜索用户数</p>
    <div class="search-keyword-chart" ref="searchKeywordRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SearchKeyword",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const searchKeywordRef = ref();

onMounted(() => {
  const myEchart = echarts.init(searchKeywordRef.value);
  const option = {
    xAxis: {
      data: [
        "北京",
        "深圳",
        "上海",
        "广州",
        "武汉",
        "西安",
        "拉萨",
        "南昌",
        "长沙",
        "合肥",
        "济南",
        "长春",
      ],
      show: false,
      boundaryGap: false, //取消坐标轴的左右留白
    },
    yAxis: {
      show: false,
    },
    series: {
      name: "搜索量",
      type: "line",
      data: [2, 36, 32, 12, 4, 22, 15, 12, 5, 10, 20, 15],
      itemStyle: {
        opacity: 0, //隐藏拐点
      },
      smooth: true, //是否曲线显示
      areaStyle: {
        // color: {
        //   //区域样式颜色
        //   type: "linear",
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: "#5fbbf1", // 0% 处的颜色
        //     },
        //     {
        //       offset: 1,
        //       color: "#5fbbff", // 100% 处的颜色
        //     },
        //   ],
        //   global: false, // 缺省为 false
        // },
        color: "#5fbbf1",
      },
      lineStyle: {
        color: "#5fbbff",
        // color: "#000",
        // color: true,
      },
    },
    tooltip: {
      //一些提示
      trigger: "axis", //触发
      axisPointer: {
        //指的时候有直线提示
        type: "line",
      },
    },
    grid: {
      top: 10,
      bottom: 0,
      left: 0,
      right: 0,
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.search-keyword {
  margin-top: 20px;
}

.search-keyword-chart {
  height: 100px;
}
</style>
